<template>
    <div class="main_content">
        <div class="content">
            <div class="search">
                <div class="list">
                    <span>关键字搜索:</span>
                    <Input v-model="keyword" placeholder="请输入昵称手机号搜索" style="width:200px" maxlength="15" clearable/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <span style="width:100px">最近登录时间:</span>
                    <DatePicker type="daterange"  placeholder="请选择时间" style="width: 200px" @on-change="getTime" v-model="valueTime"></DatePicker>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <el-button type="primary" @click="searchAll" size="small" plain>搜索</el-button>
                    <el-button type="info" @click="clear" style="margin-left:20px;" size="small" plain>重置</el-button>
                </div>
            </div>
            <div class="table">
                <el-table :data="list" :height="tableHeight">
                    <el-table-column label="头像" width="100">
                        <template slot-scope="scope">
                            <img :src="scope.row.avatarUrl" class="head_pic" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickName" label="昵称"></el-table-column>
                    <el-table-column prop="phone" label="手机号"></el-table-column>
                    <el-table-column prop="gender" label="性别" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.gender == 0">未知</span>
                            <span v-if="scope.row.gender == 1">男</span>
                            <span v-if="scope.row.gender == 2">女</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="appType" label="来源">
                        <template slot-scope="scope">
                            <span v-if="scope.row.appType == 1">APP</span>
                            <span v-if="scope.row.appType == 2">工机云APP</span>
                            <span v-if="scope.row.appType == 3">后台</span>
                            <span v-if="scope.row.appType == 4">物资APP</span>
                            <span v-if="scope.row.appType == 5">环焊缝</span>
                            <span v-if="scope.row.appType == 6">视频监控APP</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="注册时间"></el-table-column>
                    <el-table-column prop="loginTime" label="最近登录时间"></el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: right;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="detailsModal" title="日志" width="1200px;" :mask-closable="false" :footer-hide="true">
              <div class="operation">
                    <div class="top">
                        <span>选择日期:</span>
                        <DatePicker type="date" :options="options" placeholder="请选择日期" style="width: 200px" format="yyyy-MM-dd" v-model="date" :clearable="false" @on-change="changeTime"></DatePicker>
                    </div>
                    <div class="center">
                        <div class="list">
                            <div id="pageNums" v-show="pageList.length>0"></div>
                            <ul :class="{anim1: animatedTop1==true}" v-show="pageList.length >0" @mouseover="mouseOver" @mouseleave="mouseLeave">
                                <li v-for="(item,index) in pageList" :key="index">
                                    <em :style="{ background: colors[index]}"></em>
                                    <span class="name">{{item.operation}}</span>
                                    <span class="prex">{{item.count}}次</span>
                                    <span>{{item.percentage}}</span>
                                </li>
                            </ul>
                            <div class="no_data" v-show="pageList.length == 0">
                                暂无数据
                            </div>
                        </div>
                        <div class="list">
                            <div id="pageDetails" v-show="pageDetailsList.length> 0"></div>
                            <ul :class="{anim: animatedTop==true}" v-show="pageDetailsList.length> 0" @mouseover="mouseOverNum" @mouseleave="mouseLeaveNum">
                                <li v-for="(item,index) in pageDetailsList" :key="index">
                                    <em v-bind:style="{ background: colors[index]}"></em>
                                    <span class="name">{{item.operation}}</span>
                                    <span class="prex" >{{item.count}}次</span>
                                    <span>{{item.percentage}}</span>
                                </li>
                            </ul>
                            <div class="no_data" v-show="pageDetailsList.length == 0">
                                暂无数据
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="table" style="width:96%;margin:0px auto;padding-top:10px" >
                            <el-table :data="operationlist" style="width: 100%" border>
                                <el-table-column fixed="left" prop="time" label="时间" ></el-table-column>
                                <el-table-column prop="page" label="页面"></el-table-column>
                                <el-table-column prop="operation" label="操作" ></el-table-column>
                                <el-table-column prop="appType" label="应用名称" >
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.appType == 1">APP</span>
                                        <span v-if="scope.row.appType == 2">工机云APP</span>
                                        <span v-if="scope.row.appType == 3">后台</span>
                                        <span v-if="scope.row.appType == 4">物资APP</span>
                                        <span v-if="scope.row.appType == 5">环焊缝</span>
                                        <span v-if="scope.row.appType == 6">视频监控APP</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="param" label="参数" width="200px">
                                    <template slot-scope="scope">
                                        <el-tooltip placement="top" :content="scope.row.param">
                                            <span class="params">{{scope.row.param}}</span>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="clearfix" v-show="operationlist.length>0">
                            <div class="float-right">
                                <Page v-if="operationTotalCount" style="margin: 20px 20px;text-align: right;" :current.sync="operationCurrent" :total="operationTotalCount" :page-size="5" show-elevator show-total @on-change="getOperation"></Page>
                            </div>
                        </div>
                    </div>
              </div>
        </Modal>
    </div>
</template>

<script>
import { format } from "@/sever/utils.js";
import { getUserWxmpList,getUserWxmpOperationAnaly,getUserWxmpOperationList,getUserWxmpPageAnaly } from "@/api/api.js";
export default {
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            list: [],
            keyword: "",
            appType:"",
            appTypeList:[
                {
                    id:1,
                    name:"APP"
                },
                {
                    id:2,
                    name:"工机云APP"
                },
                {
                    id:3,
                    name:"后台"
                },
                {
                    id:4,
                    name:"物资APP"
                },
                {
                    id:5,
                    name:"环焊缝"
                },
                {
                    id:6,
                    name:"视频监控APP"
                }
            ],
            startDate:"",
            endDate:"",
            valueTime:"",
            detailsModal:false,
            userId:"",
            date: new Date(),
            pageList:[],
            pageTotal:"",
            pageEList:[],
            pageDetailsList:[],
            pageDetailsTotal:"",
            pageDetailsEList:[],
            colors: [
                "#ffea68",
                "#01c9fd",
                "#ff8f5f",
                "#60daab",
                "#4c83ff",
                "#ff7391",
                "#ae74f3",
                "#ebfa03",
                "#fa0309",
                "#6d13d8",
                "#fd5006",
                "#faa3b5",
                "#d5b8f7"
            ],
            animatedTop: false,
            animatedTop1:false,
            operationPageSize:5,
            operationPageNum:1,
            operationCurrent:1,
            operationTotalCount:"",
            operationlist:[],
            timer:null,
            timerNum:null,
            tableHeight: window.innerHeight - 275,
        };
    },
    watch:{
        detailsModal(val,oldval){
            if(!val) {
                clearInterval(this.timer);
                clearInterval(this.timerNum);
            }
        }
    },
    methods: {
        showScroll() {
            this.animatedTop =true;
            setTimeout(() => {
               this.pageDetailsList.push(this.pageDetailsList[0]);
               this.pageDetailsList.shift();
               this.animatedTop = false;
            }, 0);
        },
        showScrollNum() {
            this.animatedTop1 =true;
            setTimeout(() => {
               this.pageList.push(this.pageList[0]);
               this.pageList.shift();
               this.animatedTop1 = false;
            }, 0);
        },
        mouseOver(){
           clearInterval(this.timerNum)
        },
        mouseLeave(){
            if(this.pageEList.length>8) {
                this.timerNum = setInterval(this.showScrollNum, 1000);
            }
        },
        mouseOverNum(){
            clearInterval(this.timer)
        },
        mouseLeaveNum(){
            if(this.pageDetailsEList.length>8) {
                this.timer = setInterval(this.showScroll, 1000);
            }
        },
        //获取列表
        getAllList() {
            let data;
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                keyword: this.keyword,
                appType:this.appType,
                startDate:this.startDate,
                endDate:this.endDate,
            };
            getUserWxmpList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getTime(index){
          this.startDate =index[0];
          this.endDate = index[1];
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        searchAll() {
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        clear() {
            this.pageNum = 1;
            this.current = 1;
            this.keyword = "";
            this.valueTime =[];
            this.startDate ="";
            this.endDate ="";
            this.appType ="";
            this.getAllList();
        },
        //查看日志
        getDetails(index,rows){
            this.detailsModal = true;
            this.date = new Date();
            this.userId = rows[index].id;
            this.getPageNum(this.userId);
            this.getPageDetails(this.userId);
            this.getWxUserDetails(this.userId);

        },
        changeTime(index){
            this.getPageNum(this.userId);
            this.getPageDetails(this.userId);
            this.getWxUserDetails(this.userId);
        },
        //页面访问次数
        getPageNum(id){
            this.pageEList= [];
            let date = format(this.date, "YYYY-MM-DD");
            let params ={
                id :id,
                date:date,
            }
            getUserWxmpPageAnaly(params).then(res=>{
                if(res.code == 200) {
                    this.pageList =res.data.pageCountList;
                    this.pageTotal = res.data.total;
                    this.pageList.forEach((i,index)=>{
                        let obj ={
                            value: i.count,
                            name: i.operation,
                            itemStyle: {
                                normal: {
                                    color: this.colors[index]
                                }
                            }
                        }
                        this.pageEList.push(obj)
                    })
                    if(this.pageEList.length>8) {
                        this.timerNum = setInterval(this.showScrollNum, 1000);
                    }
                    this.darwPageNums();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //累计操作次数
        getPageDetails(id){
            this.pageDetailsEList =[];
            let date = format(this.date, "YYYY-MM-DD");
            let params ={
                id :id,
                date:date,
            }
            getUserWxmpOperationAnaly(params).then(res=>{
                if(res.code == 200) {
                    this.pageDetailsList  =res.data.operationCountList;
                    this.pageDetailsTotal = res.data.total;
                    this.pageDetailsList.forEach((i,index)=>{
                        let obj ={
                            value: i.count,
                            name: i.operation,
                            itemStyle: {
                                normal: {
                                    color: this.colors[index]
                                }
                            }
                        }
                        this.pageDetailsEList.push(obj)
                    })
                    if(this.pageDetailsEList.length>8) {
                        this.timer = setInterval(this.showScroll, 1000);
                    }
                    this.darwPageDetails();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //微信用户操作日志
        getWxUserDetails(id){
            let date = format(this.date, "YYYY-MM-DD");
            let params ={
               id:id,
               date:date,
               pageSize:this.operationPageSize,
               pageNum:this.operationPageNum,
            }
            getUserWxmpOperationList(params).then(res=>{
                if(res.code == 200) {
                    this.operationlist =res.data.list;
                    this.operationTotalCount =res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //页面访问总次数
        darwPageNums() {
            let pageNums = this.$echarts.init(
                document.getElementById("pageNums")
            );
            pageNums.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                title: {
                    text: this.pageTotal,
                    left: "center",
                    top: "35%",
                    textStyle: {
                        color: "#000",
                        fontSize: 18,
                        align: "center"
                    }
                },
                graphic: {
                    type: "text",
                    left: "center",
                    top: "52%",
                    style: {
                        text: "页面访问总次数(次)",
                        textAlign: "center",
                        fill: "#000",
                        fontSize: 12,
                        fontWeight: 400
                    }
                },
                series: [
                    {
                        name: "操作次数",
                        type: "pie",
                        radius: ["60%", "70%"],
                        avoidLabelOverlap: false,
                        labelLine: {
                            show: false
                        },
                        label: {
                            normal: {
                                position: "inner",
                                show: false
                            }
                        },
                        data: this.pageEList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            });
        },
        //累计次数统计图
        darwPageDetails() {
            let pageDetails = this.$echarts.init(
                document.getElementById("pageDetails")
            );
            pageDetails.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                title: {
                    text: this.pageDetailsTotal,
                    left: "center",
                    top: "35%",
                    textStyle: {
                        color: "#000",
                        fontSize: 18,
                        align: "center"
                    }
                },
                graphic: {
                    type: "text",
                    left: "center",
                    top: "52%",
                    style: {
                        text: "累计操作总次数(次)",
                        textAlign: "center",
                        fill: "#000",
                        fontSize: 12,
                        fontWeight: 400
                    }
                },
                series: [
                    {
                        name: "操作次数",
                        type: "pie",
                        radius: ["60%", "70%"],
                        avoidLabelOverlap: false,
                        labelLine: {
                            show: false
                        },
                        label: {
                            normal: {
                                position: "inner",
                                show: false
                            }
                        },
                        data: this.pageDetailsEList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            });
        },
        getOperation(index){
            this.operationPageNum =index;
            this.getWxUserDetails(this.userId);
        }
    },
    mounted() {
        this.getAllList();
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
        if(this.timerNum){
            clearInterval(this.timerNum);
        }
    },
};
</script>
<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/slider.less";
.content{
    width: 100%!important;
}
.head_pic {
    height: 40px;
    width: 40px;
}
.operation{
    width: 1100px;
    margin:0 auto;
    height: auto;
    .top{
        width: 100%;
        height: 50px;
        border-radius: 10px;
        background: #F4F4F4;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span{
            margin-right: 10px;
            margin-left: 10px;
        }
    }
    .center{
       width: 100%;
       height: 300px;
       margin-top: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       .list{
           width: 535px;
           height: 300px;
           display: flex;
           justify-content: flex-start;
           align-items: center;
           background: #F4F4F4;
           border-radius: 10px;
           #pageDetails{
               width: 250px;
               height: 300px;
           }
           #pageNums{
               width: 250px;
               height: 300px;
           }
            ul{
               width: 285px;
               max-height: 240px;
               list-style: none;
               overflow: scroll;
               cursor: pointer;
               li{
                   display: flex;
                   justify-content: flex-start;
                   align-items: center;
                   width: 100%;
                   height: 30px;
                   em{
                       width: 10px;
                       height: 10px;
                       border-radius: 50%;
                       margin-right: 10px;
                   }
                   .name{
                       width: 120px;
                       white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                   }
                   .prex{
                       width: 50px;
                   }
                   span{
                       margin-right: 10px;
                   }

               }
            }
            ul::-webkit-scrollbar {
                display: none;
            }
            .anim {
                transition: all 0.5s;
            }
            .anim1 {
                transition: all 0.5s;
            }
            .no_data{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 24px;
            }
       }
    }
    .bottom{
        width: 100%;
        height: 450px;
        background:#F4F4F4;
        margin-top: 20px;
        border-radius: 10px;
    }
}
.params{
    display: block;
    width: 180px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.clearfix{
    padding-bottom: 0 !important;
}
</style>
